<template>
  <div style="background-color: #fff; margin-bottom: 10px;">
    <h1>{{ personData.title }}</h1>
    <van-row v-for="(item, index) in personData.child" :key="index" class="info" @click="goClick(item.router)">
      <van-col :span="3" class="icon"><i :class="item.icon"></i></van-col>
      <van-col :span="21" class="mes">
        {{ item.message }}
        <span class="right">
          <van-icon name="arrow" size="16" />
        </span>
      </van-col>
    </van-row>
  </div>
</template>

<script>
export default {
  name: 'person',
  props: {
    personData: {
      type: Object
    }
  },
  methods: {
    goClick(router) {
      if (router) {
        this.$router.push(router)
      }
    }
  },
}
</script>

<style scoped lang="less">
h1 {
  height: 44px;
  line-height: 44px;
  margin: 0;
  padding-left: 14px;
  color: #9e9e9e;
  font-weight: normal;
  font-size: 14px;
  border-bottom: 1px solid #eee;
}

.info {
  color: #333;

  .icon {
    height: 44px;
    line-height: 44px;
    text-align: center;

    .iconfont {
      font-size: 18px;
    }
  }

  .mes {
    position: relative;
    height: 44px;
    line-height: 44px;
    font-size: 14px;
    border-bottom: 1px solid #eee;

    .right {
      position: absolute;
      right: 3px;
      top: 5px;
      color: #555;
    }
  }
}
</style>

